<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TXT文件上传器</title>
    <style>
        body { background: #f5f7fa; min-height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; }
        .container { background: #fff; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.08); padding: 30px; max-width: 500px; width: 100%; }
        h1 { color: #2c3e50; margin-top: 0; }
        .upload-box { border: 2px dashed #3498db; border-radius: 8px; padding: 30px 20px; margin-bottom: 25px; background: #f8fafc; }
        .file-input { display: none; }
        .file-label { display: block; padding: 12px 20px; background: #3498db; color: white; border-radius: 6px; cursor: pointer; margin: 0 auto 15px; width: fit-content; }
        .file-label:hover { background: #2980b9; }
        .submit-btn { padding: 12px 25px; background: #2ecc71; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: 500; }
        .submit-btn:hover { background: #27ae60; }
        .file-list { margin-top: 25px; }
        .file-list table { width: 100%; border-collapse: collapse; }
        .file-list th, .file-list td { border: 1px solid #eee; padding: 8px; text-align: left; }
        .file-list th { background: #f0f7ff; }
        .message { padding: 12px; border-radius: 6px; margin-bottom: 20px; font-weight: 500; }
        .success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
    </style>
</head>
<body>
<div class="container">
    <h1>TXT文件上传器</h1>
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="message {{ category }}">{{ message }}</div>
            {% endfor %}
        {% endif %}
    {% endwith %}
    <form method="POST" enctype="multipart/form-data">
        <div class="upload-box">
            <input type="file" name="file" id="file" class="file-input" accept=".txt,.pdf">
            <label for="file" class="file-label">选择文件</label>
            <div style="color:#e67e22; font-size:14px; margin-bottom:8px; text-align:center;">仅支持上传 <b>txt</b> 和 <b>pdf</b> 文件</div>
            <div id="file-name">未选择任何文件</div>
        </div>
        <input type="text" name="remark" placeholder="请输入文件备注" style="width:100%;padding:10px;margin-bottom:15px;border-radius:6px;border:1px solid #ccc;" maxlength="100">
        <button type="submit" class="submit-btn">上传文件</button>
    </form>
    {% if files %}
    <div class="file-list">
        <h2>已上传文件</h2>
        <table>
            <tr><th>新文件名</th><th>原文件名</th><th>备注</th></tr>
            {% for f in files %}
            <tr>
                <td>{{ f.new }}</td>
                <td>{{ f.orig }}</td>
                <td>{{ f.remark }}</td>
            </tr>
            {% endfor %}
        </table>
    </div>
    {% endif %}
</div>
<script>
    // 只允许txt和pdf
    var allowedExts = ["txt", "pdf"];
    document.getElementById('file').addEventListener('change', function(e) {
        const fileInput = e.target;
        const file = fileInput.files[0];
        const fileName = file ? file.name : "未选择任何文件";
        document.getElementById('file-name').textContent = fileName;
        if (file) {
            var ext = fileName.split('.').pop().toLowerCase();
            if (allowedExts.indexOf(ext) === -1) {
                alert('仅支持上传txt和pdf文件');
                fileInput.value = '';
                document.getElementById('file-name').textContent = "未选择任何文件";
            }
        }
    });
</script>
</body>
</html>